<template>
  <el-tabs
    type="border-card"
    style="margin: 0 20px; height: 93vh"
    v-model="activeName"
  >
    <el-tab-pane label="数据表" name="数据表">
      <el-table
        :data="tableData"
        :header-cell-style="{ textAlign: 'center' }"
        :cell-style="{ textAlign: 'center', padding: '7px' }"
        :row-class-name="tableRowClassName"
      >
        <el-table-column label="雨量(单位mm)" prop="afa"></el-table-column>
        <el-table-column label="电压" prop="ahp"></el-table-column>
        <el-table-column label="采集时间" prop="sensorTime"></el-table-column>
      </el-table>
    </el-tab-pane>
  </el-tabs>
</template>

<script>
import Axios from "axios";
import moment from "moment";
import * as serviceApi from "../../../common/service.config";
Axios.defaults.withcredentials = true;

export default {
  name: "QiXiang",
  props: {
    node: Object,
  },
  data() {
    return {
      activeName: "数据表",
      tableData: [],
      timer: null,
    };
  },
  methods: {
    tableRowClassName({ rowIndex }) {
      if (rowIndex % 2 === 1) {
        return "row01";
      } else {
        return "row02";
      }
    },
    queryRealData() {
      Axios({
        url: serviceApi.KB_API,
        method: "post",
        data: `appMsg={"parameter":"{\\"sensorNumber\\":\\"${this.node.sensorNumber}\\",\\"dataType\\":\\"02\\",\\"productEnum\\":\\"${this.node.productEnum}\\"}","serviceCode":"queryRealDataBySensorNo","timestamp":"","uuid":""}`,
      }).then((res) => {
        let data = res.data.parameter;
        data.sensorTime = moment(data.sensorTime).format("YYYY-MM-DD HH:mm:ss");
        if (this.tableData.length == 20) {
          this.tableData.pop();
        }
        this.tableData.unshift(data);
      });
    },
    createChart(title, unit, legendData, xData, seriesData, splitNum) {
      if (unit == "" || unit == null || typeof unit == "undefined") {
        unit = "-";
      }

      let option = {
        title: {
          text: title,
          left: "center",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "line", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        toolbox: {
          show: true,
          feature: {
            dataView: {
              show: true,
              readOnly: false,
            },
            magicType: {
              show: true,
              type: ["line", "bar"],
            },
            restore: {
              show: true,
            },
            saveAsImage: {
              show: true,
            },
          },
        },
        legend: {
          data: legendData,
          top: 25,
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          data: xData,
          axisLabel: {
            textStyle: {
              fontSize: "14",
              fontWeight: "bold",
            },
          },
        },
        yAxis: {
          name: "单位(" + unit + ")",
          scale: true,
        },
        series: seriesData,
        axisLabel: {
          textStyle: {
            fontSize: "14",
            fontWeight: "bold",
          },
        },
      };

      return option;
    },
    initWdChart(result) {
      /*处理数据，塞入option*/
      let title = this.node.sensorName;
      let unit = "℃";
      let lengendData = ["温度实时值"];
      let xData = [];
      let yData = [];

      let yItem = {};
      yItem.name = "温度值";
      yItem.type = "line";
      yItem.type = "line";
      yItem.label = {
        normal: {
          show: false,
          position: "insideRight",
        },
      };
      yItem.data = [];
      yData.push(yItem);

      /*产生温度chart配置*/
      let wdOption = this.createChart(
        title,
        unit,
        lengendData,
        xData,
        yData,
        5
      );
      if (wdOption.series[0].data.length > 50) {
        wdOption.series[0].data.shift();
        wdOption.xAxis.data.shift();
      }
      if (typeof result.aba == "undefined") {
        wdOption.series[0].data = [];
        wdOption.xAxis.data = [];
      } else {
        wdOption.series[0].data.push(result.aba);
        wdOption.xAxis.data.push(
          moment(parseInt(result.sensorTime)).format("YYYY-MM-DD")
        );
      }
      let wdChart = this.$echarts.init(document.getElementById("container-1"));
      wdChart.setOption(wdOption);
    },
    initSdChart(result) {
      /*处理数据，塞入option*/
      let title = "湿度实时图";
      let unit = "%";
      let lengendData = ["湿度实时值"];
      let xData = [];
      let yData = [];

      let yItem = {};
      yItem.name = "湿度值";
      yItem.type = "line";
      yItem.label = {
        normal: {
          show: false,
          position: "insideRight",
        },
      };
      yItem.data = [];
      yData.push(yItem);
      /*产生湿度chart配置*/
      let sdOption = this.createChart(
        title,
        unit,
        lengendData,
        xData,
        yData,
        5
      );
      if (sdOption.series[0].data.length > 50) {
        sdOption.series[0].data.shift();
        sdOption.xAxis.data.shift();
      }
      if (typeof result.aba == "undefined") {
        sdOption.series[0].data = [];
        sdOption.xAxis.data = [];
      } else {
        sdOption.series[0].data.push(result.aca);
        sdOption.xAxis.data.push(
          moment(parseInt(result.sensorTime)).format("YYYY-MM-DD")
        );
      }
      let sdChart = this.$echarts.init(document.getElementById("container-2"));
      sdChart.setOption(sdOption);
    },
    initFxChart(result) {
      /*处理数据，塞入option*/
      let title = "风向实时图";
      let unit = "";
      let lengendData = ["风向实时值"];
      let xData = [];
      let yData = [];

      let yItem = {};
      yItem.name = "风向值";
      yItem.type = "line";
      yItem.label = {
        normal: {
          show: false,
          position: "insideRight",
        },
      };
      yItem.data = [];
      yData.push(yItem);

      /*产生风向chart配置*/
      let fxOption = this.createChart(
        title,
        unit,
        lengendData,
        xData,
        yData,
        5
      );
      if (fxOption.series[0].data.length > 50) {
        fxOption.series[0].data.shift();
        fxOption.xAxis.data.shift();
      }
      if (typeof result.aba == "undefined") {
        fxOption.series[0].data = [];
        fxOption.xAxis.data = [];
      } else {
        fxOption.series[0].data.push(result.ada);
        fxOption.xAxis.data.push(
          moment(parseInt(result.sensorTime)).format("YYYY-MM-DD")
        );
      }
      let fxChart = this.$echarts.init(document.getElementById("container-3"));
      fxChart.setOption(fxOption);
    },
    initFsChart(result) {
      /*处理数据，塞入option*/
      let title = "风速实时图";
      let unit = "m/s";
      let lengendData = ["风速实时值"];
      let xData = [];
      let yData = [];

      let yItem = {};
      yItem.name = "风速值";
      yItem.type = "line";
      yItem.label = {
        normal: {
          show: false,
          position: "insideRight",
        },
      };
      yItem.data = [];
      yData.push(yItem);

      /*产生风速chart配置*/
      let fsOption = this.createChart(
        title,
        unit,
        lengendData,
        xData,
        yData,
        5
      );
      if (fsOption.series[0].data.length > 50) {
        fsOption.series[0].data.shift();
        fsOption.xAxis.data.shift();
      }
      if (typeof result.aba == "undefined") {
        fsOption.series[0].data = [];
        fsOption.xAxis.data = [];
      } else {
        fsOption.series[0].data.push(result.aea);
        fsOption.xAxis.data.push(
          new Date(parseInt(result.sensorTime)).Format("hh:mm:ss")
        );
      }
      let fsChart = this.$echarts.init(document.getElementById("container-4"));
      fsChart.setOption(fsOption);
    },
    initYlChart(result) {
      /*处理数据，塞入option*/
      let title = "雨量实时图";
      let unit = "mm";
      let lengendData = ["雨量实时值"];
      let xData = [];
      let yData = [];

      let yItem = {};
      yItem.name = "雨量值";
      yItem.type = "line";
      yItem.label = {
        normal: {
          show: false,
          position: "insideRight",
        },
      };
      yItem.data = [];

      yData.push(yItem);

      /*产生雨量chart配置*/
      let ylOption = this.createChart(
        title,
        unit,
        lengendData,
        xData,
        yData,
        5
      );

      if (ylOption.series[0].data.length > 50) {
        ylOption.series[0].data.shift();
        ylOption.xAxis.data.shift();
      }
      if (typeof result.aba == "undefined") {
        ylOption.series[0].data = [];
        ylOption.xAxis.data = [];
      } else {
        ylOption.series[0].data.push(result.afa);
        ylOption.xAxis.data.push(
          moment(parseInt(result.sensorTime)).format("YYYY-MM-DD")
        );
      }
      let ylChart = this.$echarts.init(document.getElementById("container-5"));
      ylChart.setOption(ylOption);
    },
    initQyChart(result) {
      /*处理数据，塞入option*/
      let title = "气压实时图";
      let unit = "hPa";
      let lengendData = ["气压实时值"];
      let xData = [];
      let yData = [];

      let yItem = {};
      yItem.name = "气压值";
      yItem.type = "line";
      yItem.label = {
        normal: {
          show: false,
          position: "insideRight",
        },
      };
      yItem.data = [];
      yData.push(yItem);

      /*产生气压chart配置*/
      let qyOption = this.createChart(
        title,
        unit,
        lengendData,
        xData,
        yData,
        5
      );

      if (qyOption.series[0].data.length > 50) {
        qyOption.series[0].data.shift();
        qyOption.xAxis.data.shift();
      }
      if (typeof result.aba == "undefined") {
        qyOption.series[0].data = [];
        qyOption.xAxis.data = [];
      } else {
        qyOption.series[0].data.push(result.ahp);
        qyOption.xAxis.data.push(
          moment(parseInt(result.sensorTime)).format("YYYY-MM-DD")
        );
      }
      let qyChart = this.$echarts.init(document.getElementById("container-6"));
      qyChart.setOption(qyOption);
    },
  },
  created() {
    Axios({
      url: serviceApi.KB_API,
      method: "post",
      data: `appMsg={"parameter":"{\\"sensorNumber\\":\\"${this.node.sensorNumber}\\"}","serviceCode":"queryYangGuangLast10DataBySensorNo","timestamp":"","uuid":""}`,
    }).then((res) => {
      if (res.data.parameter) {
        let list = res.data.parameter;
        for (let i = 0; i < list.length; i++) {
          list[i].sensorTime = moment(list[i].sensorTime).format(
            "YYYY-MM-DD HH:mm:ss"
          );
        }
        this.tableData = list;
      }
      this.queryRealData();
      this.timer = setInterval(() => {
        setTimeout(() => {
          this.queryRealData();
        }, 0);
      }, 1000 * 60);
    });
  },
  destroyed() {
    clearInterval(this.timer);
  },
};
</script>

<style lang="less" scoped>
.el-table {
  /deep/ .row01 {
    background: #ffbab7;
  }
  /deep/ .row02 {
    background: #c7efcf;
  }
}
.el-scrollbar /deep/ .el-scrollbar__wrap {
  overflow-x: hidden;
  .chart {
    width: 1600px;
    height: 400px;
  }
}
</style>